<template>
  <div class="page-container">
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单内容</p>
      <div class="order-content-box">
        <img class="order-image" width="160px" :src="orderDetail.imgUrls">
        <div class="order-content-detail">
          <p class="p1">{{ orderDetail.name }}</p>
          <p>订单编号：{{ orderDetail.orderNo }}</p>
          <p>产生时间：{{ orderDetail.createTime }}</p>
          <p>商家联系方式：{{ orderDetail.shopMobile }}</p>
          <p>客户联系方式：{{ orderDetail.memberInfo }}</p>
        </div>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单明细</p>
      <pf-table
        ref="pfTable"
        :columns="columns"
        @get-table-data="getTableData"
      />
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">支付信息</p>
      <div class="order-item-box">
        <span class="order-item-info">付款方式：{{ orderDetail.paymentMethod }}</span>
        <span class="order-item-info">支付流水号：{{ orderDetail.thirdNumber }}</span>
        <span class="order-item-info">付款时间：{{ orderDetail.payDateTime }}</span>
        <span class="order-item-info">实付金额：{{ orderDetail.amountRealPay }}</span>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单进度</p>
      <el-steps :active="step" finish-status="success" align-center>
        <el-step
          v-for="(item, index) in stepList"
          :key="index"
          :title="item.title"
          :description="item.time"
        />
      </el-steps>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail, getOrderProduct } from '@/api/order'

export default {
  name: 'OrderDetail',
  data() {
    return {
      id: '',
      loading: false,
      orderDetail: {},
      step: 1,
      stepList: [
        {
          title: '订单创建',
          time: '2022-12-12 12:00:00',
          status: 'success'
        },
        {
          title: '完成出票',
          status: 'process'
        },
        {
          title: '部分核销'
        },
        {
          title: '已完成'
        }
      ]
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '订单编号', prop: 'orderNo', attrs },
        { label: '票名称', prop: 'name', attrs },
        { label: '产品规格', prop: 'standardsName', attrs },
        { label: '零售价', prop: 'productPrice', attrs },
        { label: '检验店铺', prop: 'shopName', attrs },
        { label: '产生时间', prop: 'createTime', attrs },
        { label: '状态', slot: 'chargeOfStatus', attrs }
      ]
    },
    formItems() {
      return [
        {
          type: 'select',
          label: '订单状态',
          prop: 'roleName'
        }, {
          type: 'input',
          label: '订单编号',
          prop: 'roleName'
        }, {
          type: 'select',
          label: '支付方式',
          prop: 'roleName',
          options: this.payMethodOptions,
          attrs: {
            multiple: true
          }
        }, {
          type: 'date',
          label: '产生时间',
          prop: 'dateRange',
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getOrderDetail()
  },
  methods: {

    getTableData({ pageNo, pageSize }, done) {
      this.loading = true
      const data = {
        pageNo,
        pageSize,
        id: this.id
      }
      getOrderProduct(data).then(res => {
        this.loading = false
        done({ data: res || [], total: res?.length || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 订单详情
    getOrderDetail() {
      const data = {
        id: this.id
      }
      getOrderDetail(data).then(res => {
        this.orderDetail = res || {}
      }).catch(() => {
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.order-detail-item {
  margin-bottom: 20px;
}

.order-content-box {
  display: flex;

  .order-image {
    width: 160px;
    margin-right: 25px;
    border-radius: 20px;
  }

  .order-content-detail {
    font-size: 16px;
    line-height: 30px;

    .p1 {
      font-size: 28px;
      font-weight: 600;
      line-height: 40px;
    }
  }

}

.order-item-box {
  display: flex;
  flex-wrap: wrap;

  .order-item-info {
    line-height: 30px;
    width: 50%;
  }
}
</style>
